<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta name="keywords" th:content="${title}">
<meta name="description" th:content="${title}">
<link href="/systemImages/favicon.ico" rel="SHORTCUT ICON">
<title th:text="${title}+'-'+${application.propertyMap['k1']}"></title>
<link rel="stylesheet" href="/layui/css/layui.css"/>
<link rel="stylesheet" href="/css/css.css"/>
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css">

</head>
<body>

<div class="header_top" th:include="common/head::#h" />

<div class="header" th:include="common/menu::#m" />

<div class="courseList_body">
    <div class="w1220 searchContent">
        <ul>
            <li class="li_1">
                <b>类别：</b>
                <dd>
                    <a onclick="selectTypeId(0)"><span id="typeId_0" class="opt">全部</span></a>
                </dd>
                <dd th:each="courseType:${application.courseTypeList}">
                    <a th:onclick="selectTypeId([[${courseType.id}]])" ><span th:id="'typeId_'+${courseType.id}" class="opt" th:text="${courseType.name}"></span></a>
                </dd>
            </li>
            <li class="li_2">
                <b>类型：</b>
                <dd>
                    <a onclick="selectType('all')" ><span id="type_all" class="opt">全部</span></a>
                </dd>
                <dd>
                    <a onclick="selectType('free')"><span id="type_free" class="opt">免费课程</span></a>
                    <a onclick="selectType('vip')"><span  id="type_vip" class="opt">VIP课程</span></a>
                </dd>
            </li>
            <li class="li_3">
                <b>搜索：</b>
                &nbsp;
                <form action="/course/list/1" method="post">
                    <input type="text"  th:value="${s_name}" name="s_name" placeholder="请输入您要搜索的课程 " autocomplete="off" class="layui-input s_input" >
                    &nbsp;&nbsp;&nbsp;
                    <input type="submit" class="layui-btn layui-btn-radius layui-btn-sm" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ">
                </form>
            </li>
        </ul>
    </div>
    <div class="courseResult">
        <div class="w1220 course">
            <div class="course_item" th:each="course:${courseList}">
                <a target="_blank" th:href="'/course/'+${course.id}">
                    <b class="img">
                        <img class="lazy" th:src="'/courseImages/'+${course.imageName}" th:alt="${course.name}" style="display: inline;">
                    </b>

                    <div class="content">
                        <h5 th:title="${course.name}" th:text="${course.name}"></h5>
                        <p class="word">
                            <span class="free" th:if="${course.type=='free'}">免费</span>
                            <span class="vip" th:if="${course.type=='vip'}">会员</span>
                            <span class="ren"><i class="fa fa-eye"></i>&nbsp;<l th:text="${course.view}"></l></span>
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <div class="w1220">
            <div align="center" th:utext="${pageCode}">
            </div>
        </div>
    </div>

</div>
<div class="footer" th:include="common/footer::#f" />



<script src="/layui/layui.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/common.js"></script>
<script th:inline="javascript">


    /*<![CDATA[*/
    layui.use(['element','form'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    });

    function  selectTypeId(typeId) {
        // 记录到sessionStorage里
        sessionStorage.typeId=typeId;
        //$.cookie('typeId', typeId, { expires: 1 });
        var url="/course/list/1?s_typeId="+typeId;
        // var type=$.cookie('type');
        // var type=sessionStorage.getItem("type");
       var type=sessionStorage.type;
        if(type!=undefined){
            url+="&s_type="+type;
        }
        window.location.href=url;
    }

    function selectType(type) {
        // 记录到sessionStorage里
        // $.cookie('type', type, { expires: 1 });
        sessionStorage.type=type;
        var url="/course/list/1?s_type="+type;
        // var typeId=$.cookie('typeId');
        // var typeId=sessionStorage.getItem("typeId");
        var typeId=sessionStorage.typeId;
        if(typeId!=undefined){
            url+="&s_typeId="+typeId;
        }
        window.location.href=url;
    }




    /*]]>*/

    // 文档加载完毕后执行 读取cookie 动态设置样式
    $(function(){
        var clearSsessionStorage=[[${clearSsessionStorage}]];
        if(clearSsessionStorage=="yes"){  // 清空cookie
            // $.removeCookie('typeId');
            // $.removeCookie('type');
            sessionStorage.clear();
            $("#typeId_0").addClass("on");
            $("#type_all").addClass("on");
        }else{
            // var typeId=$.cookie('typeId');
            // var type=$.cookie('type');
             var typeId=sessionStorage.typeId;
            //var typeId=sessionStorage.getItem("typeId");
            var type=sessionStorage.type;
            // var type=sessionStorage.getItem("type");
            if(typeId==undefined){
                $("#typeId_0").addClass("on");
            }else{
                $("#typeId_"+typeId).addClass("on");
            }
            if(type==undefined){
                $("#type_all").addClass("on");
            }else{
                $("#type_"+type).addClass("on");
            }
        }



    });

</script>

</body>
</html>